<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '入住人信息',
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <div class="occupant-page" :class="{ select: isSelect }" v-if="list.data.length > 0">
    <wd-sticky style="z-index: 10">
      <div class="header">
        <div class="btn active" @click="to('/pages-sub/hotel/occupant/add')">
          <wd-icon name="add" size="27rpx" color="#1F2026"></wd-icon>
          <span>新增入住人</span>
        </div>
        <div class="tips">入住人姓名需要与实际入住人证件上的姓名保持一致</div>
      </div>
    </wd-sticky>

    <div class="occupant-list">
      <div class="item" v-for="(item, index) in list.data" :key="index">
        <div class="checkbox" v-if="isSelect" @click="selectItem(index)">
          <wd-checkbox v-model="item.select" checked-color="#1F2026" />
        </div>
        <div class="info">
          <div class="name">
            {{ item.name }}
            <div class="tag" v-if="item.isOwner">本人</div>
          </div>
          <div class="text mt-28rpx">身份证：{{ desensitizeIDCard(item.idCardNo) }}</div>
          <div class="text">手机号：{{ desensitizePhone(item.phone) }}</div>
        </div>
        <div class="edit" @click="to('/pages-sub/hotel/occupant/add', { id: item.id })">
          <wd-icon name="edit-outline" size="28rpx" color="#5C6066"></wd-icon>
        </div>
      </div>
    </div>

    <div class="btn-box" v-if="isSelect">
      <div class="tip">
        已选择
        <span class="text-[#FF5940]">{{ selectNum }}</span>
        人，每间房间需选择1人
      </div>
      <div class="submit active" @click="configSelect()">确定</div>
    </div>
  </div>
  <Seat v-else type="no-occupant" :loading="list.loading" />
</template>

<script lang="ts" setup>
import { back, to } from '@/utils/page'
import { msgNone, desensitizeIDCard, desensitizePhone } from '@/utils/index'

const list = ref({
  data: [],
  loading: false,
})

// 下拉刷新
onPullDownRefresh(() => {
  getData()
})

onShow(() => {
  getData()
})

function getData() {
  list.value.loading = true
  http
    .get('/personnel-list-app/list', {})
    .then((res) => {
      list.value.data = res || []
    })
    .finally(() => {
      list.value.loading = false
      uni.stopPullDownRefresh()
    })
}

// 选择数据相关逻辑
const isSelect = ref(false) // 是否选择地址
const selectNum = computed(() => list.value.data.filter((_) => _.select).length)
let instance = null

onLoad((query) => {
  isSelect.value = query.select === 'true'
  instance = getCurrentInstance().proxy
})
// 确认选择
function configSelect() {
  const select = list.value.data.filter((item) => item.select)
  if (select.length > 0) {
    const eventChannel = instance.getOpenerEventChannel()
    eventChannel.emit('getBackData', {
      backData: toRaw(select[0]),
    })
    back()
  } else {
    msgNone('至少选择一位入住人')
  }
}

function selectItem(i) {
  list.value.data.forEach((item, index) => {
    if (index !== i) {
      item.select = false
    }
  })
}
</script>

<style lang="scss" scoped>
.occupant-page {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: var(--bgc4);
  &.select {
    padding-bottom: 200rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 200rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx) !important;
  }

  .header {
    box-sizing: border-box;
    width: 100vw;
    padding: 26rpx 30rpx;
    background-color: var(--bgc4);
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 130rpx;
      background-color: #fff;
      border-radius: 30rpx;
      span {
        margin-top: 16rpx;
        font-size: 27rpx;
        line-height: 32rpx;
        color: var(--color1);
      }
    }
    .tips {
      padding-left: 20rpx;
      margin-top: 26rpx;
      font-size: 23rpx;
      color: var(--color4);
    }
  }
  .occupant-list {
    padding: 0 30rpx 26rpx;
    .item {
      display: flex;
      padding: 20rpx;
      margin-bottom: 26rpx;
      background: #ffffff;
      border-radius: 30rpx;
      .checkbox {
        display: flex;
        align-items: center;
      }
      .info {
        flex: 1;
        width: 0;
        .name {
          display: flex;
          align-items: center;
          font-size: 30rpx;
          line-height: 36rpx;
          color: var(--color1);
          .tag {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 62rpx;
            height: 34rpx;
            margin-left: 20rpx;
            font-size: 20rpx;
            color: var(--color4);
            border: 1px solid var(--color4);
            border-radius: 8rpx;
          }
        }
        .text {
          margin-top: 16rpx;
          font-size: 27rpx;
          line-height: 32rpx;
          color: var(--color3);
        }
      }
      .edit {
        padding-left: 20rpx;
      }
    }
  }

  .btn-box {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20rpx 30rpx;
    padding-bottom: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx) !important;
    background-color: #fff;
    box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    .tip {
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      font-size: 27rpx;
      line-height: 32rpx;
      color: var(--color2);
    }
    .submit {
      box-sizing: border-box;
      width: 100%;
      height: 92rpx;
      font-size: 30rpx;
      font-weight: 600;
      line-height: 88rpx;
      color: #fff;
      text-align: center;
      background-color: var(--color1);
      border-radius: 46rpx;
      box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    }
  }
}
</style>
